<template>
  <div></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useNotifyStore } from '../stores/useNotifyStore'
import { getUserRole } from '../utils/mockNotify'

const notifyStore = useNotifyStore()

onMounted(async () => {
  const role = getUserRole()
  notifyStore.loadMockNotifications(role)

  // 依次显示每条通知
  for (const notification of notifyStore.notifications) {
    await ElMessageBox({
      title: notification.title,       // 标题
      message: notification.content,  // 内容
      type: notification.type,        // 类型(success/warning/error/info)
      center: true,                   // 居中显示
      confirmButtonText: '确定',       // 确认按钮文字
      customClass: 'centered-notify'  // 自定义样式类名
    })
  }
})
</script>

<style>
.centered-notify {
  text-align: center;
}
</style>